<template>
    <!-- 对话框表单 -->
    <el-dialog custom-class="ba-operate-dialog" :close-on-click-modal="false"
        :model-value="baTable.form.operate ? true : false" @close="baTable.toggleForm">
        <template #header>
            <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']" v-zoom="'.ba-operate-dialog'">
                {{ baTable.form.operate ? t(baTable.form.operate) : '' }}
            </div>
        </template>
        <el-scrollbar v-loading="baTable.form.loading" class="ba-table-form-scrollbar">
            <div class="ba-operate-form" :class="'ba-' + baTable.form.operate + '-form'"
                :style="'width: calc(100% - ' + baTable.form.labelWidth! / 2 + 'px)'">
                <el-form v-if="!baTable.form.loading" ref="formRef" @keyup.enter="baTable.onSubmit(formRef)"
                    :model="baTable.form.items" label-position="right" :label-width="baTable.form.labelWidth + 'px'"
                    :rules="rules">
				<FormItem :label="t('orderGoodsRefund.state')" type="radio" v-model="baTable.form.items!.state" prop="state" :data="{ content: { 6: '通过', 5: '驳回' } }" :input-attr="{ placeholder: t('Please select field', { field: t('order.state') }) }" :area-readonly="true" />
                    <el-table :data="tableData" :border="true" style="width: 100%">
                        <el-table-column prop="key" label="" width="180" />
                        <el-table-column prop="value" label="">
                            <template #default="scope">
                                <div v-if="scope.row.key == '图片'">
                                    <el-image v-for="src in scope.row.value" :src="src"
                                        style="max-width: 200px; cursor: pointer;"
                                        @click="toShowSlider(scope.row.value)" :preview-src-list="scope.row.key" />
                                </div>
                                <div v-else>{{ scope.row.value }}</div>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-form>
            </div>
            <el-image-viewer v-if="showSlider" :onClose="closeSlider" :url-list="slider"> </el-image-viewer>
        </el-scrollbar>
        <template #footer>
            <div :style="'width: calc(100% - ' + baTable.form.labelWidth! / 1.8 + 'px)'">
                <el-button @click="baTable.toggleForm('')">{{ t('Cancel') }}</el-button>
                <el-button v-blur :loading="baTable.form.submitLoading" @click="baTable.onSubmit(formRef)"
                    type="primary">
                    {{ baTable.form.operateIds && baTable.form.operateIds.length > 1 ? t('Save and edit next item') :
                            t('Save')
                    }}
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref, inject, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import type baTableClass from '/@/utils/baTable'
import type { ElForm, FormItemRule } from 'element-plus'
import { buildValidatorData } from '/@/utils/validate'
import FormItem from '/@/components/formItem/index.vue'


const formRef = ref<InstanceType<typeof ElForm>>()
const baTable = inject('baTable') as baTableClass
const { t } = useI18n()

const tableData = ref([])
const slider = ref([])
const showSlider = ref(false)

const closeSlider = () => {
    showSlider.value = false
}

const toShowSlider = (arr: any) => {
    slider.value = arr
    showSlider.value = true
}

const rules: Partial<Record<string, FormItemRule[]>> = reactive({
    refund_sn: [buildValidatorData('required', t('orderGoodsRefund.refund_sn'))],
    order_goods_id: [buildValidatorData('required', t('orderGoodsRefund.order_goods_id'))],
    check: [buildValidatorData('required', t('orderGoodsRefund.check'))],
    state: [buildValidatorData('required', t('orderGoodsRefund.state'))],
    goods_state: [buildValidatorData('required', t('orderGoodsRefund.goods_state'))],
    refund_reason: [buildValidatorData('required', t('orderGoodsRefund.refund_reason'))],
    refund_price: [buildValidatorData('required', t('orderGoodsRefund.refund_price'))],
    refund_remark: [buildValidatorData('required', t('orderGoodsRefund.refund_remark'))],
    change_reason: [buildValidatorData('required', t('orderGoodsRefund.change_reason'))],
    change_attr: [buildValidatorData('required', t('orderGoodsRefund.change_attr'))],
    receive_username: [buildValidatorData('required', t('orderGoodsRefund.receive_username'))],
    receive_mobile: [buildValidatorData('required', t('orderGoodsRefund.receive_mobile'))],
    receive_address: [buildValidatorData('required', t('orderGoodsRefund.receive_address'))],
    change_remark: [buildValidatorData('required', t('orderGoodsRefund.change_remark'))],
    images: [buildValidatorData('required', t('orderGoodsRefund.images'))],
})

watch(
    () => baTable.form.loading,
    (newVal) => {
        if (!newVal) {
            const stateContent = { 0: t('orderGoodsRefund.state 0'), 1: t('orderGoodsRefund.state 1'), 2: t('orderGoodsRefund.state 2'), 3: t('orderGoodsRefund.state 3'), 4: t('orderGoodsRefund.state 4') };
            const state = ref(stateContent[baTable.form.items!.state])
            tableData.value = [
                {
                    key: t('orderGoodsRefund.refund_sn'),
                    value: baTable.form.items!.refund_sn,
                },
                {
                    key: '商品',
                    value: baTable.form.items!.orderGoods ? baTable.form.items!.orderGoods!.goods_name + '[' + baTable.form.items!.orderGoods!.attr_name + ']x' + baTable.form.items!.orderGoods!.total + '|' + baTable.form.items!.orderGoods!.price : '',
                    // value: '123',
                },
                {
                    key: '售后',
                    value: state,
                },
                {
                    key: t('orderGoodsRefund.goods_state'),
                    value: baTable.form.items!.goods_state == 0 ? '没收到货' : '已收到货',
                },
                {
                    key: t('orderGoodsRefund.refund_reason'),
                    value: baTable.form.items!.refund_reason,
                },
                {
                    key: t('orderGoodsRefund.refund_price'),
                    value: baTable.form.items!.refund_price,
                },
                {
                    key: t('orderGoodsRefund.refund_remark'),
                    value: baTable.form.items!.refund_remark,
                },
            ]
            if (baTable.form.items!.change_attr) {
                tableData.value.push({
                    key: t('orderGoodsRefund.change_attr'),
                    value: baTable.form.items!.change_attr,
                })
                tableData.value.push({
                    key: t('orderGoodsRefund.receive_username'),
                    value: baTable.form.items!.receive_username,
                })
                tableData.value.push({
                    key: t('orderGoodsRefund.receive_mobile'),
                    value: baTable.form.items!.receive_mobile,
                })
                tableData.value.push({
                    key: t('orderGoodsRefund.receive_address'),
                    value: baTable.form.items!.receive_address,
                })
            }

            tableData.value.push({
                key: t('orderGoodsRefund.images'),
                value: baTable.form.items!.images,
            })
        }
    }
)

</script>

<style lang="scss">
.ba-operate-form .el-table__header-wrapper {
    display: none;
}
</style>
